<template>
	<div class="register">
		<h1>注册</h1>
		<el-form :model="psUser" :rules="rules" ref="ruleForm" label-width="100px" class="demo-psUser">
			<el-form-item label="用户账号" prop="usercode">
				<el-input v-model="psUser.usercode"></el-input>
			</el-form-item>
			<el-form-item label="用户姓名" prop="username">
				<el-input v-model="psUser.username"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userpassword">
				<el-input v-model="psUser.userpassword" type="password"></el-input>
			</el-form-item>
			<el-form-item label="用户性别" prop="sex">
				<el-select v-model="psUser.sex" placeholder="请选择性别">
					<el-option label="男" value="Male"></el-option>
					<el-option label="女" value="Female"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年龄" prop="age">
				<el-input v-model="psUser.age"></el-input>
			</el-form-item>
			<el-form-item label="电话" prop="phonetel">
				<el-input v-model="psUser.phonetel"></el-input>
			</el-form-item>
			<el-form-item label="电子邮件" prop="email">
				<el-input v-model="psUser.email"></el-input>
			</el-form-item>
			<el-form-item label="用户角色" prop="roleid">
				<el-select v-model="psUser.roleid" placeholder="请选择角色">
					<el-option label="线路管理员" value="2"></el-option>
					<el-option label="巡检员" value="3"></el-option>
					<el-option label="消缺员" value="4"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
				<el-button type="warning" @click="returns()">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import axios from 'axios'

	import {
		register
	} from '@/config/request'

	export default {

		data() {
			return {
				psUser: {
					id: '',
					usercode: '',
					username: '',
					userpassword: '',
					sex: '',
					age: '',
					entrydate: '',
					dimissiondate: '',
					phonetel: '',
					email: '',
					creationtime: '', // 将当前时间赋值给 creationtime
					lastlogintime: '',
					createdby: '',
					lastupdatetime: '', // 将当前时间赋值给 lastupdatetime
					userstatus: '1',
					roleid: '',
				},
				rules: {
					usercode: [{
							required: true,
							message: '请输入用户账号',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 8,
							message: '长度在 5 到 8 个字符',
							trigger: 'blur'
						}
					],
					username: [{
							required: true,
							message: '请输入用户姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 3,
							message: '长度在 3 个字符',
							trigger: 'blur'
						}
					],
					userpassword: [{
							required: true,
							message: '请输入用户密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 8,
							message: '长度在 6 到 5 个字符',
							trigger: 'blur'
						}
					],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					roleid: [{
						required: true,
						message: '请选择角色',
						trigger: 'change'
					}],
					age: [{
							required: true,
							message: '请输入用户年龄',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 3,
							message: '长度在 1 到 3 个字符',
							trigger: 'blur'
						}
					],
					phonetel: [{
							required: true,
							message: '请输入用户手机号码',
							trigger: 'blur'
						},
						{
							min: 11,
							max: 11,
							message: '长度在 11 个字符',
							trigger: 'blur'
						}
					],
					email: [{
							required: true,
							message: '请输入电子邮箱',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 18,
							message: '长度在 6 到 18 个字符',
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						register(this.psUser).then(json => {
							if(json.message == "ok"){
								this.$router.push("/")
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			formatDateTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			setCurrentTime() {
				const currentDate = new Date();
				const formattedDate = this.formatDateTime(currentDate);

				this.psUser.creationtime = formattedDate; // 将当前时间赋值给 creationtime
				this.psUser.lastupdatetime = formattedDate; // 将当前时间赋值给 lastupdatetime
			},
			returns(){
				this.$router.go(-1);
			}
		},
		created() {
			this.setCurrentTime(); // 在组件创建时设置当前时间
		}
	}
</script>
<style>
	.register {
		max-width: 500px;
		margin: 0 auto;
		padding: 30px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.register h1 {
		text-align: center;
	}
</style>